<template>
<view class="all">
    <view class="top">
        <!-- <view class="top"> -->
        <view style="display: flex; position: relative; align-items: center">
            <view class="search">
                <input type="text" value="" v-model="query.keyword" @input="doSearch" placeholder="搜索手机号/订单号/新人姓名" placeholder-style="color:#999;font-size:13px;" />
                <icon class="searchIcon" @click="searchFn" type="search" size="26upx"></icon>
            </view>
            <button type="primary" @click="showFilter" size="mini">筛选</button>
        </view>
    </view>
    <view class="order-list" v-if="listData.length>0">
        <view class="order-item" v-for="(item, index) in listData" :key="index">
            <order-list :row="item"></order-list>
        </view>
    </view>
    <van-empty v-else description="暂无记录" />
    <searchDialog ref="searchDialog" :getQuery="query" @getOrderList="getData" :pagination="pagination" :listData="listData"></searchDialog>
</view>
</template>

<script>
import request from '@/utils/request.js';
import orderList from '@/component/order-list/order-list';
import titleFix from '@/utils/titleFix';
import {
    settlementQuery
} from '../list/settlementSearch/settlementQuery.js';
import searchDialog from '../list/settlementSearch/settlementSearch.vue';
export default {
    name: 'list',
    mixins: [titleFix],
    components: {
        orderList,
        searchDialog
    },
    data() {
        return {
            query: Object.assign({}, settlementQuery), // 搜索条件
            pagination: {
                page: 1,
                limit: 15,
                total: 0
            },
            listData: [],
            timeout: null
        };
    },
    onLoad() {
        let _this = this;
        _this.getData()
    },
    onShow() {
        // this.pagination = {
        //     page: 1,
        //     limit: 15
        // };
        // this.listData = [];
        // this.getData();
    },
    onReachBottom() {
        if ((this.pagination.limit * this.pagination.page) <= this.pagination.total) {
            ++this.pagination.page;
            this.getData();
        }

    },
    methods: {
        //显示筛选框
        showFilter() {
            this.listData = [];
            this.$refs['searchDialog'].showDialogOpen()
        },
        getData() {
            let that = this;
            let params = {};
            console.log(that.query)
            params = Object.assign({}, that.query);
            params['pagination'] = that.pagination;
            request.request({
                url: '/api/order.settlement/index',
                showLoading: true,
                token: true,
                data: params,
                success(res) {
                    if (res.code == 200) {
                        that.pagination = res.data.pagination;
                        if (res.data.list.length > 0) {
                            that.listData = that.listData.concat(res.data.list);
                        }

                    }
                },
                fail(e) {
                    uni.showToast({
                        icon: 'none',
                        title: '服务器开小差去啦~'
                    });
                }
            });
        },
        doSearch() {
            let _this = this;
            _this.listData = [];
            if (_this.timeout) {
                clearTimeout(_this.timeout)
            }
            _this.timeout = setTimeout(function () {
                _this.pagination.page = 1;
                _this.getData()
            }, 500)

        },
        //进入详情页
        lookDetailFn(id) {
            uni.navigateTo({
                url: '../orderInfo/goodsDetail/goodsDetail?id=' + id
            });
            // uni.navigateTo({
            // 	url:"../orderInfo/orderDetail/orderDetail?id="+id
            // })
        },
        viewAudit(id) {
            uni.navigateTo({
                url: '../orderInfo/myApproval/myApproval?id=' + id
            });
        },

    }
};
</script>

<style lang="less">
page {
    background: #f4f4f4;
    padding-top: 0;
}

.order-list {
    margin-top: 100upx;
	
	.order-item {
		margin-top: 12px;
	}
}

.top {
    width: 100%;
    // height: 150upx;
    background: #ffffff;
    padding: 10upx 20upx 10upx 19upx;
    box-sizing: border-box;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10;

    .left {
        width: 50upx;
        height: 58upx;
        display: flex;
        align-items: center;
        float: left;

        image {
            width: 40upx;
            height: 40upx;
        }
    }

    .search {
        flex: 1;
        margin-left: 10upx;

        input {
            width: 576upx;
            height: 58upx;
            background: rgba(255, 255, 255, 1);
            border: 1upx solid #dedede;
            border-radius: 5upx;
            padding-left: 24upx;
            box-sizing: border-box;
        }

        .searchIcon {
            position: absolute;
            right: 190upx;
            top: 50%;
            transform: translateY(-50%);
        }
    }

    .screen {
        width: 55upx;
        height: 58upx;
        font-size: 26upx;
        color: #406ceb;
        margin-left: 10upx;
        line-height: 58upx;
    }

    .search-more-btn {
        flex: 0 15%;

        button {
            padding: 8upx;
            font-size: 12px;
            background-color: #007aff;
            color: #fff;
        }
    }
}

/* 顶部tabbar */
.nav-bar {
    padding: 20upx 0;
    white-space: nowrap;
    background-color: #fff;

    .uni-scroll-view-content {}

    .nav-item {
        display: inline-block;
        padding: 5upx 20upx;
        text-align: center;
        font-size: 30upx;
        color: #303133;
        position: relative;

        &:after {
            content: '';
            width: 0;
            height: 0;
            border-bottom: 4upx solid #007aff;
            position: absolute;
            left: 50%;
            bottom: 0;
            transform: translateX(-50%);
            transition: 0.3s;
        }
    }

    .current {
        color: #ffffff;
        background: rgba(64, 108, 235, 1);
        border-radius: 21upx;

        &:after {
            width: 50%;
        }
    }
}

.allOrder {
    width: 100%;
    height: 100%;
    padding: 24upx;
    margin-top: 110upx;
    box-sizing: border-box;

    .orderBox {
        width: 702upx;
        // height: 370upx;
        background: #ffffff;
        margin-bottom: 24upx;
        border-radius: 15px;
        position: relative;

        .title {
            width: 100%;
            height: 72upx;
            padding-left: 24upx;
            padding-right: 24upx;
            box-sizing: border-box;
            font-size: 26upx;
            border-bottom: 1upx solid #eeeeee;
            display: flex;
            align-items: center;
            position: relative;

            .number {
                width: auto;
                height: 25upx;
                color: #333333;
                display: block;
                float: left;
            }

            .status {
                // width:78upx;
                height: 25upx;
                display: block;
                color: #f7b55f;
                position: absolute;
                right: 24upx;
            }
        }
    }
}

.image {
    image {
        width: 200upx;
        height: 200upx;
        position: absolute;
        right: -40upx;
        top: -40upx;
        z-index: 5;
        animation-name: mychange;
        animation-duration: 500ms;
    }
}

@keyframes mychange {
    0% {
        position: absolute;
        right: -20upx;
        top: -20upx;
        z-index: 5;
        transform: scale(1.3);
    }

    50% {
        position: absolute;
        right: -20upx;
        top: -20upx;
        z-index: 5;
        transform: scale(1.3);
    }

    100% {
        position: absolute;
        right: -40upx;
        top: -40upx;
        z-index: 5;
        transform: scale(1);
    }
}

.allOrder .orderBox .info {
    width: 100%;
    height: 222upx;
    border-bottom: 1upx solid #eeeeee;
    padding-left: 24upx;
    box-sizing: border-box;

    .left {
        width: 50%;
        height: 100%;
        float: left;

        .con {
            width: 100%;
            height: 45upx;
            display: flex;
            align-items: center;

            .txt1 {
                width: 120upx;
                height: 45upx;
                font-size: 24upx;
                color: #666666;
                line-height: 45upx;
            }

            .txt2 {
                width: 200upx;
                height: 45upx;
                font-size: 24upx;
                color: #666666;
                line-height: 45upx;
                text-overflow: ellipsis;
                overflow: auto;
                white-space: nowrap;
            }
        }
    }

    .right {
        width: 50%;
        height: 100%;
        float: right;

        .con {
            width: 100%;
            height: 45upx;
            display: flex;
            align-items: center;
            box-sizing: border-box;

            .txt1 {
                width: 120upx;
                height: 45upx;
                font-size: 24upx;
                color: #666666;
                line-height: 45upx;
            }

            .txt2 {
                width: 200upx;
                height: 45upx;
                font-size: 24upx;
                color: #666666;
                line-height: 45upx;
                text-overflow: ellipsis;
                overflow: auto;
                white-space: nowrap;
            }
        }
    }
}

.allOrder .orderBox .detail {
    width: 100%;
    height: 72upx;
    padding-left: 24upx;
    padding-right: 24upx;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    position: relative;

    text {
        width: 104upx;
        height: 25upx;
        display: block;
        font-size: 26upx;
        color: #666666;
    }

    image {
        width: 32upx;
        height: 32upx;
        display: block;
        position: absolute;
        right: 24upx;
    }
}

// 筛选框
.content {
    margin-top: 40upx;

    .con_box {
        margin-top: 10upx;

        .title {
            width: 100%;
            height: 25upx;
            font-size: 26upx;
            color: #666666;
            font-weight: 500;
            font-family: PingFang SC;
            padding: 0 24upx;
            box-sizing: border-box;
        }

        .list_box {
            padding: 0 24upx;
            box-sizing: border-box;
            display: flex;
            justify-content: left;
            flex-wrap: wrap;

            .view_box {
                width: 160upx;
                height: 66upx;
                padding: 2upx;
                display: flex;
                justify-content: center;
                align-items: center;

                margin-top: 16upx;
                margin-right: 16upx;
                font-size: 24upx;
                white-space: wrap;
                color: #666666;
                background: #f6f6f6;
                border-radius: 5px;

                text {
                    text-align: center;
                }
            }
        }
    }
}

//选中状态
.actived {
    background: #eef2ff !important;
    border: 1upx solid #406ceb;
    color: #406ceb !important;
}

.btn {
    width: 100%;
    height: 73upx;
    position: absolute;
    bottom: 33upx;
    display: flex;
    justify-content: center;

    button {
        width: 214upx;
        height: 73upx;
        line-height: 73upx;
        font-size: 28upx;
        border-radius: 37px;
    }

    .reset {
        color: #406ceb;
        border: 1px solid rgba(64, 108, 235, 1);
        background: #ffffff;
    }

    .save {
        background: #406ceb;
        color: #ffffff;
    }
}
</style>
